import {
  Spin,
  Table,
  Card
} from "antd";
import React, { Component } from "react";
import "./home.scss";
import Link from "umi/link";
import util from "../util"
import { Chart, Geom, Axis,Tooltip,Legend } from 'bizcharts';
import { DragDropContext,Droppable, Draggable } from 'react-beautiful-dnd';
import { connect } from "dva";
const { Meta } = Card;

const grid = 6;
@connect(
  state => ({
    chartData:state.home.chartData,
    list:state.home.list
	}),{
    loading:(isLoading)=>({
			type:'common/loading',
			isLoading
		}),
    getApiList:()=>({
			type:'home/getList'
		})
  }
)
class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      elements:[],
      items:[
        {
          content:'item 10',
          id:"10"
        },
        {
          content:'item 1',
          id:"1"
        },
        {
          content:'item 2',
          id:"2"
        },
        {
          content:'item 3',
          id:"3"
        },
        {
          content:'item 4',
          id:"4"
        },
        {
          content:'item 5',
          id:"5"
        }
      ]
    };
    this.onDragEnd = this.onDragEnd.bind(this);
  }
  componentDidMount(){
    this.props.getApiList()
  }
  componentWillReceiveProps(props) {
  }
  componentWillUpdate(newProps){
    let that = this;
    let elements = that.state.elements;
    let lth = elements.length;
    let list = newProps.list || [];
    list.forEach((item,index) => {
      elements.push(
        <div className="data-item" key={lth+index+1}>
          <div className="data-title">{lth+index+1}、{item.subject}</div>
          <div className="data-answer" dangerouslySetInnerHTML={{__html:item.answer}}/>
        </div>
      )
    });
  }
  
  componentDidUpdate(){
    console.log('did update')
  }
  getListStyle = isDraggingOver => ({
    background: isDraggingOver ? "lightblue" : "lightgrey",
    padding: grid,
    width: 250
  });
  getItemStyle = (isDragging, draggableStyle) => ({
    // some basic styles to make the items look a bit nicer
    userSelect: "none",
    padding: grid * 2,
    margin: `0 0 ${grid}px 0`,
  
    // change background colour if dragging
    background: isDragging ? "lightgreen" : "grey",
  
    // styles we need to apply on draggables
    ...draggableStyle
  });
  reorder = (list, startIndex, endIndex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);
  
    return result;
  };
  onDragEnd(result) {
    // dropped outside the list
    console.log(result)
    if (!result.destination) {
      return;
    }

    const items = this.reorder(
      this.state.items,
      result.source.index,
      result.destination.index
    );
    console.log(items);
    this.setState({
      items
    });
  }
  render() {
    
    return (
      <div className="index-container">
        <div className="data-list" >
          {this.state.elements}
        </div>
        {/* <DragDropContext onDragEnd={this.onDragEnd}>
          <Droppable droppableId="droppable">
            {(provided, snapshot) => (
              <div
                {...provided.droppableProps}
                ref={provided.innerRef}
                style={this.getListStyle(snapshot.isDraggingOver)}
              >
                {this.state.items.map((item, index) => (
                  <Draggable key={item.id} draggableId={item.id} index={index}>
                    {(provided, snapshot) => (
                      <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={this.getItemStyle(
                          snapshot.isDragging,
                          provided.draggableProps.style
                        )}
                      >
                        {item.content}
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </DragDropContext> */}
      </div>
    );
  }
}

export default index;
